{% macro component(config) %}
    {% import "system/macro/form-component/info-hint.html.twig" as hint %}
    {% import "system/macro/icons/error.html.twig" as error_icon %}

    {# Merge overwrite default config with given config. #}
    {% set config = {isReadOnly: false, isRequired: true, width:'lg:bc-w-3/4'} | merge(config) %}
    {# Sets a default name by using the id. #}
    {% set name = config.id %}
    {% if config.name is not empty %}
        {% set name = config.name %}
    {% endif %}

    {% if config.cssClasses is not empty %}
        {% set cssClasses = [] | merge(config.cssClasses) %}
    {% else %}
        {% set cssClasses = [] %}
    {% endif %}

    <div class="bc-flex bc-flex-wrap bc-items-center bc-space-x-2 {{ config.width }}">
        <textarea
            id="{{ config.id }}"
            class="bc-block bc-min-w-lg bc-w-full bc-rounded-md bc-flex-1 bc-border-gray-300 bc-shadow-sm bc-peer focus:bc-border-blue-500 focus:bc-ring-blue-500 sm:bc-text-sm group-[.was-validated]/form:invalid:bc-border-red-500 group-[.was-validated]/form:invalid:bc-text-red-600 group-[.was-validated]/form:invalid:focus:bc-border-red-500 group-[.was-validated]/form:focus:invalid:bc-ring-red-500 {{ cssClasses | join(' ') }}"
            name="{{ name }}"
            autocapitalize="off"
            autocomplete="off"
            rows="5"
            spellcheck="false"
            {% if config.dataAttribute is not empty %}{{ config.dataAttribute | raw }}{% endif %}
            {% if config.isReadOnly == true %} readonly{% endif %}
            {% if config.isDisabled == true %} disabled{% endif %}
            {% if config.isRequired == true %} required{% endif %}>{{ config.value }}</textarea>
        {% if config.errorMessage is empty %}
            <div class="bc-hidden group-[.was-validated]/form:peer-invalid:bc-block bc-text-red-600 {% if config.hasToggle %} bc-pr-2 {% endif %}">{{ error_icon.component({}) }}</div>
        {% endif %}
        {% if config.hint is not empty %}
            {{ hint.component({
                hint: config.hint,
                position: config.hintPopupPosition
            }) }}
        {% endif %}
        {% if config.errorMessage is not empty %}
            <div class="bc-hidden bc-pt-2 bc-min-w-full group-[.was-validated]/form:peer-invalid:bc-block bc-text-red-600">{{ config.errorMessage | raw }}</div>
        {% endif %}
    </div>
{% endmacro %}
